<template>
	<view>
		
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x class="border-bottom scroll-row"
		style="height: 80upx;"
		:scroll-into-view="scrollinto"
		:scroll-with-animation="true"
		>
			<view class="px-3 scroll-row-item" style="height: 80upx;line-height: 80upx;;"
			v-for="(item, index) in tabBars" :key="index"
			:class="tabIndex === index ? 'main-text-color': ''"
			@tap="changeTab(index)"
			:id="'tab' + index"
			>
				<text class="font-md">{{item.name}}</text>
			</view>
		</scroll-view>
		
		<swiper :duration="150" :current="tabIndex" :style="'height:' + scrollH+ 'px;'"
		@change="onChangeTab"
		>
			<swiper-item v-for="(item, index) in newsitems" :key="index">
				<scroll-view scroll-y="true" :style="'height:' + scrollH+ 'px;'"
				@scrolltolower="loadmore(index)"
				>
					<block v-for="(list, listIndex) in item.list" :key="listIndex">
						<!-- 轮播图组件 -->
						<swiper-image v-if="list.type === 'swiper'" :resdata="list.data"></swiper-image>
						<template v-else-if="list.type === 'indexnav'">
							<!-- 首页分类 -->
							<index-navs :resdata="list.data"></index-navs>
							<divider></divider>
						</template>
						<template v-else-if="list.type === 'threeAdv'">
							<three-adv :resdata="list.data"></three-adv>
							<divider></divider>
						</template>
						<!-- 基础卡片组件 -->
						<!-- <card title="每日精选" cover="/static/images/demo/demo4.jpg"></card> -->
						<!-- 商品列表 -->
						<view v-else-if="list.type === 'commonList'" class="row j-sb">
							<block v-for="(item2, index2) in list.data" :key="index2">
								<common-list :item="item2" :index="index2"></common-list>
							</block>
							
						</view>
						
					</block>
					<!-- 上拉加载更多 -->
					<divider />
					<view class="d-flex a-center j-center text-light-muted font-md py-3">
						{{item.loadtext}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
		
	</view>
	
</template>

<script>
	import swiperImage from "@/components/index/swiper-image.vue"
	import indexNavs from "@/components/index/index-nav.vue"
	import threeAdv from "@/components/index/three-adv.vue"
	import card from "@/components/common/card.vue"
	import commonList from "@/components/common/common-list.vue"
	
	let demoTabBars = [
		{name: '推荐'},
		{name: '关注'},
		{name: '热点'},
		{name: '财经'},
		{name: '娱乐'},
		{name: '军事'},
		{name: '本地'}
	];
	
	let demo1 = [{
		type: "swiper",
		data: [
			{
				src: "../../static/images/demo/demo4.jpg"
			},
			{
				src: "../../static/images/demo/demo4.jpg"
			},
			{
				src: "../../static/images/demo/demo4.jpg"
			}
		]
	},
	{
		type: "indexnav",
		data: [
			{ src: "/static/logo.png", text:"新品发布"},
			{ src: "/static/logo.png", text:"小米众筹"},
			{ src: "/static/logo.png", text:"新品发布"},
			{ src: "/static/logo.png", text:"新品发布"},
			{ src: "/static/logo.png", text:"新品发布"}
		]
	},
	{
		type: "threeAdv",
		data: {
			big: {
				src: "/static/images/demo/demo1.jpg"
			},
			smalltop: {
				src: "/static/images/demo/demo2.jpg"
			},
			smallbottom: {
				src: "/static/images/demo/demo2.jpg"
			}
		}
	}, 
	{
		type: "commonList",
		data: [
			{
				cover: "/static/images/demo/22.png",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			},
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			},
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			},
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			}
		]
	}
];
	
let demo2 = [{
		type: "swiper",
		data: [
			{
				src: "../../static/images/demo/demo4.jpg"
			},
			{
				src: "../../static/images/demo/demo4.jpg"
			},
			{
				src: "../../static/images/demo/demo4.jpg"
			}
		]
	},
	{
		type: "threeAdv",
		data: {
			big: {
				src: "/static/images/demo/demo1.jpg"
			},
			smalltop: {
				src: "/static/images/demo/demo2.jpg"
			},
			smallbottom: {
				src: "/static/images/demo/demo2.jpg"
			}
		}
	}, 
	{
		type: "commonList",
		data: [
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			},
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			},
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			},
			{
				cover: "/static/images/demo/list/1.jpg",
				title: "米家空调",
				desc: "1.5匹变频",
				oprice: "1399",
				mprice: "2699"
			}
		]
	}
];
	export default {
		components:{
			swipperImage,
			indexNavs,
			threeAdv,
			card,
			commonList
		},
		data() {
			return {
				tabBars: [],
				scrollinto: "",
				scrollH: 500,
				tabIndex: 0,
				newsitems: []
				
			}
		},
		onLoad() {
			//获取可是区域高度
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(82);
				}
			});
			this.__init();
		},
		methods: { 
			//切换选项卡
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				this.scrollinto = 'tab' + index;
				this.addData();
			},
			//监听滑动事件
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			//初始化事件
			__init() {
				//获取顶部选项卡
				this.tabBars = demoTabBars;
				//根据顶部选项卡生成页面
				let arr = [];
				for (var i = 0; i < this.tabBars.length; i++) {
					let obj = {
						list: [],
						//1.上拉加载更多 2.加载中 3.没有更多了
						loadtext: "上拉加载更多"
					}
					if (i === 0) {
						obj.list = demo1;
					}
					arr.push(obj);
				}
				this.newsitems = arr;
			},
			
			//加载数据
			addData() {
				//当前索引
				let index = this.tabIndex;
				//请求数据库
				this.newsitems[index].list= demo2;
			},
			
			//上拉加载更多
			loadmore(index) {
				console.log("加载更多");
				let tab = this.newsitems[index];
				if (tab.loadtext !== '上拉加载更多') return;
				//模拟加载
				tab.loadtext = '加载中';
				setTimeout(() => {
					tab.list = [...tab.list, ...demo2];
					tab.loadtext = '上拉加载更多';
				}, 2000);
				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
